<template>
    <view class="detail-container">
        <!-- 新闻标题区域 -->
        <view class="article-header">
            <view class="title">文化中国行 | 艺术与乡村跨界交融 宜居宜业和美乡村展新貌</view>
            <view class="subtitle">重庆高新区曾家镇虎峰山村：艺术赋能乡村振兴</view>
            <view class="meta-info">
                <view class="source">来源：央视网</view>
                <view class="datetime">2025-04-19 15:20:00</view>
            </view>
        </view>

        <!-- 正文内容区域 -->
        <view class="article-content">
            <view class="lead">央视网消息：</view>
            <view class="paragraph">在重庆高新区曾家镇，虎峰山村犹如一颗隐匿于山林间的"明珠"，以独特的艺术氛围和自然风光吸引着来自各地的艺术家和游客。</view>
            <image class="content-image" src="/static/2.png" mode="widthFix"></image>
            <view class="image-caption">虎峰山村艺术景观（央视网记者 摄）</view>
            <view class="paragraph">这里是艺术灵感的无尽源泉，也是艺术与乡村深度融合的生动样本。近年来，当地政府通过...</view>
            
            <!-- 更多段落和图片 -->
            <view class="paragraph">艺术家驻村计划实施以来，已有30多位艺术家在此设立工作室...</view>
            <image class="content-image" src="/static/3.png" mode="widthFix"></image>
            
            <view class="paragraph">村民王大爷告诉记者："以前我们村很偏僻，现在变成了网红打卡地..."</view>
        </view>

        <!-- 相关新闻推荐 -->
        <view class="related-news">
            <view class="section-title">相关新闻</view>
            <view class="related-item" v-for="item in relatedNews" :key="item.id" @click="goDetail(item.id)">
                <view class="related-title">{{item.title}}</view>
                <view class="related-time">{{item.time}}</view>
            </view>
        </view>

        <!-- 版权声明 -->
        <view class="copyright">
            <view class="statement">（总台央视记者 杨书杰）</view>
            <view class="disclaimer">声明：本文内容来自央视网，仅用于信息传播，如有版权问题请联系管理员。</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            relatedNews: [
                {
                    id: 1,
                    title: "乡村振兴战略实施五年成效显著",
                    time: "2025-04-18 10:15"
                },
                {
                    id: 2,
                    title: "文旅融合助力乡村经济发展",
                    time: "2025-04-17 16:30"
                },
                {
                    id: 3,
                    title: "全国艺术村建设经验交流会在京举行",
                    time: "2025-04-15 09:20"
                }
            ]
        };
    },
    methods: {
        goDetail(id) {
            uni.navigateTo({
                url: `/pages/detail/detail?id=${id}`
            });
        }
    },
    onLoad(options) {
        // 这里可以根据options.id获取新闻详情数据
        // 模拟从API获取数据
        // this.fetchNewsDetail(options.id);
    }
};
</script>

.detail-container {
    padding: 20rpx 30rpx;
    background: #fff;
    color: #333;
    line-height: 1.8;
    font-size: 32rpx;

    .article-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;

        .title {
            font-size: 44rpx;
            font-weight: bold;
            line-height: 1.4;
            margin-bottom: 20rpx;
            color: #222;
        }

        .subtitle {
            font-size: 34rpx;
            color: #666;
            margin-bottom: 30rpx;
        }

        .meta-info {
            display: flex;
            justify-content: space-between;
            font-size: 28rpx;
            color: #999;

            .source {
                color: #d81e06; // 央视红
            }
        }
    }

    .article-content {
        .lead {
            font-weight: bold;
            margin-bottom: 30rpx;
        }

        .paragraph {
            text-indent: 2em;
            margin-bottom: 30rpx;
            text-align: justify;
        }

        .content-image {
            width: 100%;
            border-radius: 8rpx;
            margin: 20rpx 0;
        }

        .image-caption {
            font-size: 28rpx;
            color: #666;
            text-align: center;
            margin-bottom: 30rpx;
        }
    }

    .related-news {
        margin-top: 50rpx;
        border-top: 1px solid #eee;
        padding-top: 30rpx;

        .section-title {
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 30rpx;
            color: #d81e06;
        }

        .related-item {
            padding: 20rpx 0;
            border-bottom: 1px solid #f5f5f5;

            .related-title {
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }

            .related-time {
                font-size: 26rpx;
                color: #999;
            }
        }
    }

    .copyright {
        margin-top: 50rpx;
        padding-top: 30rpx;
        border-top: 1px solid #eee;
        font-size: 28rpx;
        color: #999;

        .statement {
            margin-bottom: 20rpx;
            color: #666;
        }

        .disclaimer {
            line-height: 1.6;
        }
    }
}